// 购物车页面js

  // 7 调用函数生成页面
  One();
  // 8给父级标签添加点击事件 通过事件委托来执行
  $('.container').click(function(e){
    // (1) 获取cart数据
    const cart = JSON.parse(localStorage.cart);
    // (2)如果点击的是全选按钮 给全选按钮添加name属性然后绑定
    if(e.target.getAttribute('name') === 'all'){
      // 设定localStorage中所有的数据单元 buy 属性值
      cart.forEach(item=>{
        item.buy = e.target.checked;
      })
      // 9 如果点击的是其他的input标签

    }else if(e.target.getAttribute('name')==='other'){
      //(1) 修改索引下标 和 点击标签索引下标相同的 数组中的数据
      cart[ e.target.getAttribute('index')-0].buy=e.target.checked;
      
      // 10 如果点击的是删除标签
    }else if( e.target.getAttribute('name') === 'del' ){
      // 从点击标签 索引下标 开始 数组中删除 1个单元
      cart.splice( e.target.getAttribute('index')-0 , 1 );
    //  11 如果点击的是 - 标签
    }else if( e.target.getAttribute('name') === '减' ){
      // 给索引下标相同的数据 num属性值 累减1
      cart[ e.target.getAttribute('index')-0 ].num--; 

    // 12 如果点击的是 + 标签
    }else if( e.target.getAttribute('name') === '加' ){
      // 给索引下标相同的数据 num属性值 累减1
      cart[ e.target.getAttribute('index')-0 ].num++; 

    }
    // 新数组 设定 给 localStorage.cart 存储
    // cart数组要转化为 json字符串
    localStorage.cart =JSON.stringify(cart)
    One() 
  })

  function One() {
    // 定义变量 存储 种类 件数 金额
    let type = 0;
    let number = 0;
    let money = 0;
    // 1获取本地存储的信息
    let cart = localStorage.cart;
    if (cart === undefined) {
      // 2没创建购物车 生成对应的信息
      $('.container').html('<h1>你还没创建购物车,请先创建购物车</h1>')
    } else {
      // 3 定义变量 选择默认true 储存结果
      let bool = true;
      // 4 有购物车数据
      cart = JSON.parse(cart);
      if (cart.length === 0) {
        // 购物车数组是一个空数组
        // 生成对应的提示信息
        $('.container').html('<h1>您的购物车已经被清空,请您再去添加商品</h1>');
      } else {
        // 动态生成页面
        // 分为3部分 
        //开头 起始标签 至  ul标签的 起始标签
        // 中间部分 根据 数组 循环遍历生成的 li标签
        // 结束部分 ul标签的结束标签 到最后
        let str = `
  <div class="panel panel-info ">
            <div class="panel-body bg-info">
              <div class="checkbox">
                <label>
                  <input name="all" type="checkbox" value="">
                  全选
                </label>
              </div>
            </div>
            <div class="panel-footer" >
              <ul class="cart-list">`;

        // 5 中间部分
        cart.forEach((item, key) => {
          // 如果有商品选中状态是false 给变量bool 也赋值false
          if (item.buy === false) {
            bool = false
          } else {
            // 如果当前商品是选中状态
            // 计算购买品种类 简述金额
            //种类累加1
            type++;
            //件数 累加 商品中的 num
            number += item.num;
            //金额 累加 单价 * 件数
            money += item.goods_price * item.num;
          }
          str += `
            <li class="cart-item" style="height: 150px;">
              <div class="left">
                <input name="other" index="${key}" type="checkbox" ${item.buy ? 'checked' : ''}>
              </div>
              <div class="right">
                <div class="media">
                  <div class="media-left">
                    <a href="#">
                      <img class="media-object" src="${item.goods_small_logo}" alt="...">
                    </a>
                  </div>
                  <div class="media-body">
                    <h4 class="media-heading">${item.goods_name}</h4>
                    <p>
                      <i class="glyphicon glyphicon-yen"></i>
                      <span>${item.goods_price}</span>
                    </p>
                    <div class="btn-group pull-right" role="group" aria-label="...">
                      <button name="减" index="${key}" type="button" class="btn btn-default" ${item.num === 1 ? 'disabled' : ''}>-</button>
                      <button type="button" class="btn btn-default" disabled>${item.num}</button>
                      <button name="加" index="${key}" type="button" class="btn btn-default" ${item.num == item.goods_number ? 'disabled' : ''}>+</button>
                    </div>
                    <button name="del" index="${key}" class="del btn btn-danger">我不要了</button>

                  </div>
                </div>
              </div>
            </li>
          `;
        })

        // 6 结束部分
        str += `
              </ul>
            </div>
            <div>
              <h1>您一共购买了 ${type} 种商品</h1>
              <h1>您一共购买了 ${number} 件商品</h1>
              <h1>您需要支付 ${money.toFixed(2)} 元</h1>
            </div>
          </div>
        `;
        // 将 字符串写入 标签中
        $('.container').html(str);
        // 根据 bool 变量储存的数据 设定 全选按钮 选中状态
        $('[name="all"]').prop('checked', bool);

      }

    }
  }
